<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户分析 - 企业管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --success-color: #2ecc71;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
            --info-color: #9b59b6;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            padding: 20px;
        }

        .analysis-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 20px;
        }

        .page-title {
            font-size: 22px;
            margin-bottom: 20px;
            color: var(--secondary-color);
            display: flex;
            align-items: center;
        }

        .page-title i {
            margin-right: 10px;
            color: var(--primary-color);
        }

        .filter-bar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 6px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .filter-group {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        .filter-group label {
            margin-right: 5px;
            font-weight: 500;
            white-space: nowrap;
        }

        select, input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
            min-width: 120px;
        }

        .btn {
            padding: 8px 16px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .btn:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .btn-success {
            background: var(--success-color);
        }

        .btn-warning {
            background: var(--warning-color);
        }

        .btn-danger {
            background: var(--danger-color);
        }

        .chart-container {
            height: 400px;
            margin-bottom: 30px;
            position: relative;
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 15px;
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .chart-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--secondary-color);
        }

        .chart-actions {
            display: flex;
            gap: 10px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border-left: 4px solid var(--primary-color);
            transition: transform 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-card h3 {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 10px;
        }

        .stat-card .value {
            font-size: 24px;
            font-weight: 600;
            color: var(--secondary-color);
            margin-bottom: 5px;
        }

        .stat-card .change {
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .change.up {
            color: var(--success-color);
        }

        .change.down {
            color: var(--danger-color);
        }

        .user-segments {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .segment-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s;
        }

        .segment-card:hover {
            transform: translateY(-3px);
        }

        .segment-card h3 {
            font-size: 16px;
            margin-bottom: 15px;
            color: var(--secondary-color);
            display: flex;
            align-items: center;
        }

        .segment-card h3 i {
            margin-right: 8px;
            color: var(--primary-color);
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .data-table th, .data-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        .data-table th {
            background: #f8f9fa;
            font-weight: 500;
            color: var(--secondary-color);
        }

        .data-table tr:hover {
            background: #f5f7fa;
        }

        .progress-bar {
            height: 6px;
            background-color: #ecf0f1;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background-color: var(--primary-color);
        }

        .tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
        }

        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            font-weight: 500;
        }

        .tab.active {
            border-bottom-color: var(--primary-color);
            color: var(--primary-color);
        }

        .badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .badge-primary {
            background-color: #d1ecf1;
            color: #0c5460;
        }

        .badge-success {
            background-color: #d4edda;
            color: #155724;
        }

        .badge-warning {
            background-color: #fff3cd;
            color: #856404;
        }

        .badge-danger {
            background-color: #f8d7da;
            color: #721c24;
        }

        .badge-info {
            background-color: #e2e3e5;
            color: #383d41;
        }

        @media (max-width: 768px) {
            .filter-bar {
                flex-direction: column;
            }

            .filter-group {
                width: 100%;
            }

            select, input {
                width: 100%;
                margin-bottom: 10px;
            }

            .stats-grid {
                grid-template-columns: 1fr 1fr;
            }

            .user-segments {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<div class="analysis-container">
    <h1 class="page-title"><i class="bi bi-people-fill"></i>用户分析</h1>

    <div class="filter-bar">
        <div class="filter-group">
            <label><i class="bi bi-calendar"></i> 时间范围:</label>
            <select id="timeRange">
                <option>最近7天</option>
                <option>最近30天</option>
                <option selected>最近90天</option>
                <option>本月</option>
                <option>本季度</option>
                <option>本年</option>
            </select>
        </div>

        <div class="filter-group">
            <label><i class="bi bi-person"></i> 用户类型:</label>
            <select id="userType">
                <option>全部用户</option>
                <option>新用户</option>
                <option>活跃用户</option>
                <option>沉默用户</option>
                <option>流失用户</option>
            </select>

            <label><i class="bi bi-geo-alt"></i> 地区:</label>
            <select id="region">
                <option>全部地区</option>
                <option>华北</option>
                <option>华东</option>
                <option>华南</option>
                <option>西部</option>
            </select>

            <button class="btn" id="filterBtn"><i class="bi bi-funnel"></i> 筛选</button>
            <button class="btn btn-success" id="exportBtn"><i class="bi bi-download"></i> 导出</button>
        </div>
    </div>

    <div class="tabs">
        <div class="tab active">用户概览</div>
        <div class="tab">用户行为</div>
        <div class="tab">用户留存</div>
        <div class="tab">用户价值</div>
    </div>

    <div class="stats-grid">
        <div class="stat-card">
            <h3>总用户数</h3>
            <div class="value">24,568</div>
            <div class="change up"><i class="bi bi-arrow-up"></i> 15.3% 同比</div>
        </div>

        <div class="stat-card">
            <h3>新增用户</h3>
            <div class="value">3,245</div>
            <div class="change up"><i class="bi bi-arrow-up"></i> 8.7% 同比</div>
        </div>

        <div class="stat-card">
            <h3>活跃用户</h3>
            <div class="value">8,762</div>
            <div class="change up"><i class="bi bi-arrow-up"></i> 6.2% 同比</div>
        </div>

        <div class="stat-card">
            <h3>留存率</h3>
            <div class="value">42.5%</div>
            <div class="change down"><i class="bi bi-arrow-down"></i> 3.1% 同比</div>
        </div>
    </div>

    <div class="chart-container">
        <div class="chart-header">
            <div class="chart-title"><i class="bi bi-graph-up"></i> 用户增长趋势</div>
            <div class="chart-actions">
                <button class="btn btn-success btn-sm" id="dailyBtn">日</button>
                <button class="btn btn-sm" id="weeklyBtn">周</button>
                <button class="btn btn-sm" id="monthlyBtn">月</button>
            </div>
        </div>
        <canvas id="userGrowthChart"></canvas>
    </div>

    <div class="user-segments">
        <div class="segment-card">
            <h3><i class="bi bi-pie-chart"></i> 用户年龄分布</h3>
            <div id="ageDistributionChart" style="width:100%; height:300px;"></div>
        </div>

        <div class="segment-card">
            <h3><i class="bi bi-geo-alt"></i> 用户地域分布</h3>
            <div id="regionDistributionChart" style="width:100%; height:300px;"></div>
        </div>
    </div>

    <div class="chart-container">
        <div class="chart-header">
            <div class="chart-title"><i class="bi bi-arrow-repeat"></i> 用户留存分析</div>
            <div class="chart-actions">
                <button class="btn btn-success btn-sm" id="retention7Btn">7日</button>
                <button class="btn btn-sm" id="retention30Btn">30日</button>
                <button class="btn btn-sm" id="retention90Btn">90日</button>
            </div>
        </div>
        <canvas id="retentionChart"></canvas>
    </div>

    <h2><i class="bi bi-table"></i> 用户行为分析</h2>
    <table class="data-table">
        <thead>
        <tr>
            <th>用户类型</th>
            <th>用户数</th>
            <th>占比</th>
            <th>客单价</th>
            <th>购买频次</th>
            <th>留存率</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><span class="badge badge-primary">新用户</span></td>
            <td>3,245</td>
            <td>
                <div>13.2%</div>
                <div class="progress-bar">
                    <div class="progress" style="width: 13.2%;"></div>
                </div>
            </td>
            <td>¥256</td>
            <td>1.2</td>
            <td>35.4%</td>
            <td><button class="btn btn-sm" style="padding: 3px 8px; font-size:12px;"><i class="bi bi-eye"></i> 详情</button></td>
        </tr>
        <tr>
            <td><span class="badge badge-success">活跃用户</span></td>
            <td>8,762</td>
            <td>
                <div>35.7%</div>
                <div class="progress-bar">
                    <div class="progress" style="width: 35.7%;"></div>
                </div>
            </td>
            <td>¥420</td>
            <td>4.8</td>
            <td>78.6%</td>
            <td><button class="btn btn-sm" style="padding: 3px 8px; font-size:12px;"><i class="bi bi-eye"></i> 详情</button></td>
        </tr>
        <tr>
            <td><span class="badge badge-info">普通用户</span></td>
            <td>10,324</td>
            <td>
                <div>42.0%</div>
                <div class="progress-bar">
                    <div class="progress" style="width: 42%;"></div>
                </div>
            </td>
            <td>¥198</td>
            <td>2.1</td>
            <td>45.2%</td>
            <td><button class="btn btn-sm" style="padding: 3px 8px; font-size:12px;"><i class="bi bi-eye"></i> 详情</button></td>
        </tr>
        <tr>
            <td><span class="badge badge-warning">沉默用户</span></td>
            <td>1,857</td>
            <td>
                <div>7.6%</div>
                <div class="progress-bar">
                    <div class="progress" style="width: 7.6%;"></div>
                </div>
            </td>
            <td>¥175</td>
            <td>0.3</td>
            <td>12.8%</td>
            <td><button class="btn btn-sm" style="padding: 3px 8px; font-size:12px;"><i class="bi bi-eye"></i> 详情</button></td>
        </tr>
        <tr>
            <td><span class="badge badge-danger">流失用户</span></td>
            <td>380</td>
            <td>
                <div>1.5%</div>
                <div class="progress-bar">
                    <div class="progress" style="width: 1.5%;"></div>
                </div>
            </td>
            <td>¥210</td>
            <td>0.1</td>
            <td>5.4%</td>
            <td><button class="btn btn-sm" style="padding: 3px 8px; font-size:12px;"><i class="bi bi-eye"></i> 详情</button></td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    // 初始化用户增长趋势图表
    const userGrowthCtx = document.getElementById('userGrowthChart').getContext('2d');
    const userGrowthChart = new Chart(userGrowthCtx, {
        type: 'line',
        data: {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
            datasets: [
                {
                    label: '总用户数',
                    data: [18500, 19500, 20500, 21500, 23000, 24568],
                    borderColor: '#3498db',
                    backgroundColor: 'rgba(52, 152, 219, 0.1)',
                    borderWidth: 2,
                    tension: 0.3,
                    fill: true
                },
                {
                    label: '新增用户',
                    data: [2500, 2800, 3100, 2900, 3200, 3245],
                    borderColor: '#2ecc71',
                    backgroundColor: 'rgba(46, 204, 113, 0.1)',
                    borderWidth: 2,
                    tension: 0.3,
                    fill: false
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    mode: 'index',
                    intersect: false
                }
            },
            scales: {
                y: {
                    beginAtZero: false,
                    title: {
                        display: true,
                        text: '用户数量'
                    }
                }
            }
        }
    });

    // 初始化用户年龄分布图表 (使用ECharts)
    const ageDistributionChart = echarts.init(document.getElementById('ageDistributionChart'));
    ageDistributionChart.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: ['18-24岁', '25-30岁', '31-35岁', '36-40岁', '40岁以上']
        },
        series: [
            {
                name: '年龄分布',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 5230, name: '18-24岁', itemStyle: { color: '#3498db' } },
                    { value: 9820, name: '25-30岁', itemStyle: { color: '#2ecc71' } },
                    { value: 6540, name: '31-35岁', itemStyle: { color: '#e74c3c' } },
                    { value: 2340, name: '36-40岁', itemStyle: { color: '#f39c12' } },
                    { value: 1638, name: '40岁以上', itemStyle: { color: '#9b59b6' } }
                ]
            }
        ]
    });

    // 初始化用户地域分布图表 (使用ECharts)
    const regionDistributionChart = echarts.init(document.getElementById('regionDistributionChart'));
    regionDistributionChart.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: ['华北', '华东', '华南', '西部', '其他']
        },
        series: [
            {
                name: '地域分布',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 7850, name: '华北', itemStyle: { color: '#3498db' } },
                    { value: 10200, name: '华东', itemStyle: { color: '#2ecc71' } },
                    { value: 8760, name: '华南', itemStyle: { color: '#e74c3c' } },
                    { value: 5430, name: '西部', itemStyle: { color: '#f39c12' } },
                    { value: 2328, name: '其他', itemStyle: { color: '#9b59b6' } }
                ]
            }
        ]
    });

    // 初始化用户留存分析图表
    const retentionCtx = document.getElementById('retentionChart').getContext('2d');
    const retentionChart = new Chart(retentionCtx, {
        type: 'bar',
        data: {
            labels: ['第1天', '第3天', '第7天', '第14天', '第30天', '第60天', '第90天'],
            datasets: [
                {
                    label: '留存率',
                    data: [100, 78, 62, 51, 42, 35, 28],
                    backgroundColor: 'rgba(52, 152, 219, 0.7)',
                    borderColor: 'rgba(52, 152, 219, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': ' + context.raw + '%';
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    title: {
                        display: true,
                        text: '留存率 (%)'
                    }
                }
            }
        }
    });

    // 标签切换
    document.querySelectorAll('.tab').forEach(tab => {
        tab.addEventListener('click', function() {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            // 这里可以添加标签切换逻辑
        });
    });

    // 图表按钮切换
    document.getElementById('dailyBtn').addEventListener('click', function() {
        // 切换到日视图逻辑
        this.classList.add('btn-success');
        document.getElementById('weeklyBtn').classList.remove('btn-success');
        document.getElementById('monthlyBtn').classList.remove('btn-success');
    });

    document.getElementById('weeklyBtn').addEventListener('click', function() {
        // 切换到周视图逻辑
        this.classList.add('btn-success');
        document.getElementById('dailyBtn').classList.remove('btn-success');
        document.getElementById('monthlyBtn').classList.remove('btn-success');
    });

    document.getElementById('monthlyBtn').addEventListener('click', function() {
        // 切换到月视图逻辑
        this.classList.add('btn-success');
        document.getElementById('dailyBtn').classList.remove('btn-success');
        document.getElementById('weeklyBtn').classList.remove('btn-success');
    });

    // 留存分析切换
    document.getElementById('retention7Btn').addEventListener('click', function() {
        // 显示7日留存数据
        this.classList.add('btn-success');
        document.getElementById('retention30Btn').classList.remove('btn-success');
        document.getElementById('retention90Btn').classList.remove('btn-success');
        // 更新图表数据
    });

    document.getElementById('retention30Btn').addEventListener('click', function() {
        // 显示30日留存数据
        this.classList.add('btn-success');
        document.getElementById('retention7Btn').classList.remove('btn-success');
        document.getElementById('retention90Btn').classList.remove('btn-success');
        // 更新图表数据
    });

    document.getElementById('retention90Btn').addEventListener('click', function() {
        // 显示90日留存数据
        this.classList.add('btn-success');
        document.getElementById('retention7Btn').classList.remove('btn-success');
        document.getElementById('retention30Btn').classList.remove('btn-success');
        // 更新图表数据
    });

    // 筛选按钮
    document.getElementById('filterBtn').addEventListener('click', function() {
        // 执行筛选逻辑
        alert('筛选条件已应用');
    });

    // 导出按钮
    document.getElementById('exportBtn').addEventListener('click', function() {
        // 执行导出逻辑
        alert('数据导出中...');
    });

    // 响应式调整
    window.addEventListener('resize', function() {
        userGrowthChart.resize();
        ageDistributionChart.resize();
        regionDistributionChart.resize();
        retentionChart.resize();
    });
</script>
</body>
</html>